<template>
	<view class="page">
		<view class="topVue text-center">
			<text style="font-weight: 700; font-size: 36rpx; color: #333333;">{{ $t('卡牌') }}</text>
		</view>
		<u-gap height="92"></u-gap>
		<view class="searchVue padding-row30">
			<view class="search flex align-center">
				<image src="/static/card/search.png" style="width: 40rpx; height: 40rpx;"></image>
				<input type="text" :placeholder="$t('搜索卡牌编号')" v-model="number" placeholder-style="color: #666666; font-size: 30rpx;"/>
				<view class="btn text-center" @click="searchFun">{{ $t('搜索') }}</view>
			</view>
		</view>
		<u-gap height="90"></u-gap>

		<view class="flex flex-wrap margin10 padding-row30">
			<view class="item text-center relative" v-for="(item, index) in list" :key="item.id" :class="{
      'item-1': item.id % 12 === 1,
      'item-2': item.id % 12 === 2,
      'item-3': item.id % 12 === 3,
      'item-4': item.id % 12 === 4,
      'item-5': item.id % 12 === 5,
      'item-6': item.id % 12 === 6,
      'item-7': item.id % 12 === 7,
      'item-8': item.id % 12 === 8,
      'item-9': item.id % 12 === 9,
      'item-10': item.id % 12 === 10,
      'item-11': item.id % 12 === 11,
      'item-12': item.id % 12 === 0
    }">
				<u-gap height="8"></u-gap>
				<text style="font-size: 24rpx; color: #FFFFFF;">{{ $t('编号') }}{{ item.serialNo }}</text>
				<view class="absolute-center price">{{ item.price }}USDT</view>
				<view class="buy absolute-center" @click="toBuy(item)" v-if="item.canBuy === true">{{ $t('购买') }}</view>
			</view>
		</view>

		<!-- 购买弹框 -->
		<u-popup v-model="show" border-radius="16" z-index="100" mode="center">
			<view style="width: 540rpx;">
				<view class="padding40">
					<view class="tip text-center">{{ $t('确认购买') }}</view>
					<view class="content text-center margin50">{{ cardPrice }}USDT</view>
				</view>
				<view class="flex margin40">
					<view class="w50 cancel text-center" @click="show=false">{{ $t('取消') }}</view>
					<view class="w50 confirm text-center" @click="buyFun">{{ $t('确定') }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import init from "../../index";
  export default {
		data() {
			return {
				number: "",
				cardId: "",
				cardPrice: "",
				list: [],
				pageNum: 1,
				pageSize: 16,
				isLastPage: false,
				show: false
			};
		},

		onReachBottom() {
			if(this.isLastPage) return
			this.pageNum++
			this.getList()
		},

		watch: {
			number(){
				if(!this.number) {
					this.list = []
					this.pageNum = 1
					this.getList()
				}
			}
		},

		async onShow() {
			this.pageNum = 1
			this.list = []
			await this.getList()
		},

		methods: {
			toBuy(item){
				this.cardId = item.id
				this.cardPrice  = item.price
				this.show = true
			},

			searchFun(){
				this.pageNum = 1
				this.list = []
				this.getList()
			},

			// 获取卡片列表
			async getList(){
				const res = await this.$request("/front/card/cardList", {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					serialNo: this.number
				})
        if (res.code === -2) {
          await init.initAddress();
        }
        if (res.code===0) {
					let list = res.data.list
					this.list = this.list.concat(list)
					this.isLastPage = res.data.isLastPage
				}
			},

			// 购买
			async buyFun(){
				const res = await this.$request("/front/card/buyCard", {
					cardId: this.cardId
				})
				if(res.code===0) {
					this.show = false
					this.$u.toast(this.$t("成功"))
					this.list = []
					this.pageNum = 1
					await this.getList()
				}else{
					console.log(res)
					this.$u.toast(res.msg)
				}
			},
		}
	}
</script>

<style lang="less">
	.topVue {
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		background: linear-gradient(to bottom, #E3EEFF, #EBF3FF);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}
	.searchVue {
		width: 750rpx;
		height: 90rpx;
		background: linear-gradient(to bottom, #EBF3FF, #fff);
		position: fixed;
		left: 0;
		top: 92;
		z-index: 99;
		.search {
			width: 690rpx;
			height: 80rpx;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0,0,0,0.05);
			border: 1rpx solid #4D9FED;
			border-radius: 40rpx;
			padding: 10rpx;
			input {
				flex: 1;
				font-size: 30rpx;
				padding-left: 10rpx;
				color: #333;
			}
			.btn {
				width: 129rpx;
				height: 60rpx;
				background: linear-gradient( 350deg, #4D9FED 0%, #5FCEF3 100%);
				border-radius: 36rpx;
				line-height: 58rpx;
				font-size: 28rpx;
			}
		}
	}

	.item {
		width: 216rpx;
		height: 320rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		.price {
			color: #fff;
			bottom: 80rpx;
		}
		.buy {
			width: 117rpx;
			height: 40rpx;
			background: #4E9EEE;
			border-radius: 20rpx;
			color: #fff;
			font-size: 24rpx;
			line-height: 40rpx;
			bottom: 30rpx;
		}
	}
	.item:nth-child(3n) {
		margin-right: 0;
	}
	.item:nth-child(3n) {
		margin-right: 0;
	}
	.item-1 {
		background: url("../../static/bg/1.png");
		background-size: 100% 100%;
	}
	.item-2 {
		background: url("../../static/bg/2.png");
		background-size: 100% 100%;
	}
	.item-3 {
		background: url("../../static/bg/3.png");
		background-size: 100% 100%;
	}
	.item-4 {
		background: url("../../static/bg/4.png");
		background-size: 100% 100%;
	}
	.item-5 {
		background: url("../../static/bg/5.png");
		background-size: 100% 100%;
	}
	.item-6 {
		background: url("../../static/bg/6.png");
		background-size: 100% 100%;
	}

	.item-7 {
		background: url("../../static/bg/7.png");
		background-size: 100% 100%;
	}
	.item-8 {
		background: url("../../static/bg/8.png");
		background-size: 100% 100%;
	}
	.item-9 {
		background: url("../../static/bg/9.png");
		background-size: 100% 100%;
	}
	.item-10 {
		background: url("../../static/bg/10.png");
		background-size: 100% 100%;
	}
  .item-11 {
		background: url("../../static/bg/11.png");
		background-size: 100% 100%;
	}
  .item-12 {
    background: url("../../static/bg/12.png");
		background-size: 100% 100%;
	}
	.tip {
		color: #666;
		font-weight: 600;
		font-size: 32rpx;
	}
	.content {
		color: #000;
		font-size: 46rpx;
	}
	.cancel {
		color: #999999;
		font-size: 32rpx;
		line-height: 88rpx;
		border-top: #E5E6EB 1rpx solid;
		border-right: #E5E6EB 1rpx solid;
	}
	.confirm {
		color: #333333;
		font-size: 32rpx;
		line-height: 88rpx;
		border-top: #E5E6EB 1rpx solid;
	}
</style>
